<template>
  <div class="chart-container">
    <div>
        <el-row>
          <el-button type="primary" @click="openModelFm">同步CMDB</el-button>
          <el-button type="primary" @click="batchDataFm">开始跑批</el-button>
          <el-input placeholder="请输入内容" v-model="searchValue" style="width:20%;margin-left:10px">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
       </el-row>
       
    </div>

    <div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="模型名称" ></el-table-column>
            <el-table-column prop="name" label="模型ID" ></el-table-column>
            <el-table-column prop="province" label="主键" ></el-table-column>
            <el-table-column label="是否启用" >
                <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.city"
                      active-color="#409eff"
                      inactive-color="#ff4949">
                  </el-switch>
                </template>
            </el-table-column>

            <el-table-column label="字段">
              <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="enterPageFm(scope.$index, scope.row)">进入</el-button>
              </template>  
            </el-table-column>
            
            <el-table-column label="跑批" >
              <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="runBatchFm(scope.$index, scope.row)">开始</el-button>
              </template>  
            </el-table-column>

            <el-table-column label="操作" >
              <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>  
            </el-table-column>
          </el-table>



    </div>

    <el-drawer
      title="我是标题"
      :visible.sync="drawerBooelan"
      :with-header="false">
      <span>我来啦!</span>
    </el-drawer>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible" top="3vh">
        <el-table :data="gridData"   @selection-change="handleSelectionChange"   height="700">
           <el-table-column
            type="selection"
            >
          </el-table-column>
          <el-table-column property="date" label="日期" ></el-table-column>
          <el-table-column property="name" label="姓名" ></el-table-column>
          <el-table-column property="address" label="地址"></el-table-column>
        </el-table>
         <span slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
        </span>
   </el-dialog>


  </div>
</template>

<script>
export default {
  name: "demoTwenty42",
  filters: {},
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: true,
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: false,
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: false,
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: true,
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ],
      searchValue:"",
      drawerBooelan: false,
      dialogTableVisible:false,

      gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],

        multipleSelection:[],
        


    };
  },
  created() {},
  mounted() {},
  methods: {
    handleEdit(index, row) {
        console.log(index, row);
        this.drawerBooelan=true
    },
    handleDelete(index, row) {
        console.log(index, row);
    },
    runBatchFm(index, row){

    },
    enterPageFm(index, row){

    },
    openModelFm(){
       this.dialogTableVisible=true
    },
    batchDataFm(){

    },
     handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val;
     },
     
   

  }
};
</script>

<style>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
